<template>
  <div id="content-field">
    <el-card class="box-card" style="width: 100%; height: 81vh">
      <template #header>
        <div class="card-header">
          <span><slot name="content-field-card-name"></slot></span>
          <slot name="content-field-card-button"></slot>
        </div>
      </template>
      <div class="card-body" style="height: 62vh">
        <slot name="content-field-card-body"></slot>
      </div>
      <template #footer>
        <slot name="content-field-card-footer"></slot>
      </template>
    </el-card>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
